<template>
    <div class="center">

         <Layout>
            <Header class="Header">
                <h1>评论主页</h1><span>欢迎同学们踊跃提出建议.......</span>
                <Button @click="empit">重新编辑</Button>
                <Button type="success" @click="commit">提交评论</Button>
            </Header>
            <Layout>
                <Sider hide-trigger class="Sider">
                    <Row>
                            <Rate show-text allow-half v-model="valueCustomText">
                                校园环境评分：<span style="color: #f5a623">{{ valueCustomText }}</span>
                            </Rate>
                            <br>
                            <Rate show-text allow-half v-model="valueCustomText1">
                                食堂就餐评分：<span style="color: #f5a623">{{ valueCustomText1 }}</span>
                            </Rate>
                            <br>
                            <Rate show-text allow-half v-model="valueCustomText2">
                                门岗安全评分：<span style="color: #f5a623">{{ valueCustomText2 }}</span>
                            </Rate>
                            <br>
                            <Rate show-text allow-half v-model="valueCustomText3">
                                宿舍管理评分：<span style="color: #f5a623">{{ valueCustomText3 }}</span>
                            </Rate>
                            <br>
                            <Rate show-text allow-half v-model="valueCustomText4">
                                教学楼环境评分：<span style="color: #f5a623">{{ valueCustomText4 }}</span>
                            </Rate>
                    </Row>
                </Sider>
                <Content class="Content">
                    <quill-editor
                        v-model="contents"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)" style="height:334px">
                    </quill-editor>
                </Content>
            </Layout>
            <Footer class="Footer">
                    <Table :columns="columns1" :data="data1" border height="180" stripe ></Table>
            </Footer>
        </Layout>
    </div>
</template>
<script>
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
export default {
    data () {
            return {
                columns1: [
                     {
                        title: '评论人',
                        key: 'name',
                        width:150
                    },
                    {
                        title: '评论内容',
                        key: 'contents',
                    },
                    {
                        title: '评论时间',
                        key: 'time',
                        sortable: true,
                        width:150,
                        render: (h, params) => {
                            let time = this.$moment(params.row.ctime).format("YYYY-MM-DD hh:mm:s")
                            return h('div', [
                                h('span', time)
                            ]);
                        }
                    }
                ],
                data1: [
                ],
                url:this.$store.state.url,
                valueText: 3,
                valueCustomText: 3.8,
                valueText1: 3,
                valueCustomText1: 3.8,
                valueText2: 3,
                valueCustomText2: 3.8,
                valueText3: 3,
                valueCustomText3: 3.8,
                valueText4: 3,
                valueCustomText4: 3.8,
                contents: ``,
                editorOption: {},
            }
        },
        components: {
            quillEditor
        },
        methods: {
            onEditorReady(editor) { // 准备编辑器

            },
            onEditorBlur(){}, // 失去焦点事件
            onEditorFocus(){}, // 获得焦点事件
            onEditorChange(){}, // 内容改变事件
            //获取数据
            getdata(){
                this.axios({
                    url:`${this.url}cate`,
                    method:'get'
                }).then(res=>{
                    this.data1 = res.data.reverse();
                    this.contents = "";
                })
            },
            //提交评论内容
            commit(){
                var obj = {
                    name: 'John Brown',
                    contents: `${this.contents}+'校园环境评分:'${this.valueCustomText}'+食堂就餐评分:'${this.valueCustomText1}+'门岗安全评分:'${this.valueCustomText2}+'宿舍管理评分:'${this.valueCustomText3}+'教学楼环境评分:'${this.valueCustomText4}`,
                }
                this.axios({
                    url:`${this.url}cate`,
                    method:'post',
                    data:obj
                }).then(()=>{
                    this.getdata()
                })
            },
            empit(){
                this.contents = "";
            }
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        },
        mounted(){
            this.getdata();

        }
}
</script>
<style lang="scss" scoped>
.center{
    color:skyblue;
}
.Header{
    text-align:center;
    background: skyblue;
    color:#fff;
    margin-bottom:10px;
    h1{
        display:inline-block;
    }
    span{
        color:#3c3c3c;
        margin-left:20px;
    }
    Button{
        float:right;
        margin-left:5px;
        margin-top:15px;
    }
}
.Sider{
    height:400px;
    text-align:center;
    font-size:14px;
    padding-top:40px;
}
.Content{
    height:400px;

}
.Footer{
    position:relative;
    margin-top:10px;
    background: skyblue;
    height:200px;
    padding-top:10px;
}
</style>